<!-- 选择收货地址 -->
<template>
    <div class="address-container">
        <div class="address-box">
          <div class="address">
            <div class="address-wrapper" @click="chooseAddress(index, item, deliveryList)" :class="{'selected': current == index}" v-for="(item, index) in deliveryList" :key="index">
              <h3><strong>{{item.name}}</strong><span>{{item.phone}}</span></h3>
              <!--<p>邮政编码：{{item.code}}</p>-->
              <p>收货地址：{{item.address}}</p>
              <div class="default-address">
                <p><img v-if="current == index" src="~assets/images/choosed.png" /><img v-else src="~assets/images/unchoose.png" /><span v-if="current == index">已选择寄送至该收货地址</span><span v-else>寄送至该收货地址</span></p>
                <h5><span @click.stop.prevent="editAddress(index, deliveryList)">修改</span><span @click.stop.prevent="deleteAddress(item.id)">删除</span></h5>
              </div>
            </div>
          </div>
          <div class="add-btn" @click="goAddAddress">
            <img src="~assets/images/add.png" /><span>添加地址</span>
          </div>
        </div>
        <div class="next-step"  @click="goBuyGoods"><!--:class="{'fixed-position': positionFlag, 'static-position': !positionFlag}"-->
          <span @click="submitToPay">提交付款</span>
        </div><!--name="fade" -->

          <div class="mask" v-show="showMask" @click="closeMask($event)">
            <div ref="maskContent">
              <transition name="fade">
                <div class="general-height shopping-detail" v-if="showShopping">
                  <h3 class="title">购买详情</h3>
                  <div class="content">
                    <h2><span>{{shoppingDetail.cvnt}}</span> CVNT</h2>
                    <p><span>购买商品</span><strong>{{shoppingDetail.name}}</strong></p>
                    <p><span>购买数量</span><strong>{{shoppingDetail.num}}{{shoppingDetail.unit}}</strong></p>
                  </div>
                  <div class="pay-btn">
                    <p @click.stop.prevent="confirmToPay">确认付款</p>
                  </div>
                </div>
              </transition>
              <div class="general-height pay-password" v-if="showPay">
                <h3 class="title">输入支付密码</h3>
                <div class="password-wrapper">
                  <span><strong v-if="password.num1 >= 0"></strong></span>
                  <span><strong v-if="password.num2 >= 0"></strong></span>
                  <span><strong v-if="password.num3 >= 0"></strong></span>
                  <span><strong v-if="password.num4 >= 0"></strong></span>
                  <span><strong v-if="password.num5 >= 0"></strong></span>
                  <span><strong v-if="password.num6 >= 0"></strong></span>
                </div>
                <div class="forget-password" @click="getPwd">忘记密码?</div>
                <div class="number-group">
                  <div class="number-btn">
                    <div @click.stop.prevent="chooseNum(1)">1</div><div @click.stop.prevent="chooseNum(2)">2</div><div @click.stop.prevent="chooseNum(3)">3</div>
                  </div>
                  <div class="number-btn">
                    <div @click.stop.prevent="chooseNum(4)">4</div><div @click.stop.prevent="chooseNum(5)">5</div><div @click.stop.prevent="chooseNum(6)">6</div>
                  </div>
                  <div class="number-btn">
                    <div @click.stop.prevent="chooseNum(7)">7</div><div @click.stop.prevent="chooseNum(8)">8</div><div @click.stop.prevent="chooseNum(9)">9</div>
                  </div>
                  <div class="number-btn">
                    <div class="no-num"></div><div @click.stop.prevent="chooseNum(0)">0</div><div class="no-num" @click.stop.prevent="deletePwd"><img src="~assets/images/del.png" /></div>
                  </div>
                </div>
                <div class="pay-loading" v-show="showPayLoading">
                  <div class="paying">
                    <img src="~assets/images/paying.gif" />
                    <span>正在支付</span>
                  </div>
                </div>
              </div>
              <div class="general-height id-check" v-if="showIdCheck">
                <h3 class="title check-title"><img @click.stop.prevent="close" src="~assets/images/close.png" />身份验证</h3>
                <div class="check-content">
                  <p>需要通过绑定的手机 {{starPhone}}</p>
                  <p>进行身份验证以确保账户的资金安全</p>
                  <div class="sms-input">
                    <input placeholder="请输入接收到的验证码" type="number" v-model="verificationCode" /><span @click.stop.prevent="getVerifyCode" style="background:rgba(23,62,143,1);" v-if="showFlag">发送验证码</span><span v-else>重新发送 {{countdown}}s</span>
                  </div>
                  <h4 @click.stop.prevent="finishVerification" class="finish-btn" :class="{'success': verificationCode.length == 4}">完成验证</h4>
                </div>
                <!--<div class="pay-loading" v-show="showPayLoading">
                    <div class="paying">
                        <img src="~assets/images/paying.gif" />
                        <span>正在支付</span>
                    </div>
                </div>-->
              </div>
              <div class="general-height shopping-detail" v-if="showResult">
                <h3 class="title">支付结果</h3>
                <div class="result">
                  <img src="~assets/images/success.png" />
                  <h3>商品购买成功</h3>
                  <p>可在商城-我的订单中查看物流信息</p>
                </div>
                <div class="pay-btn">
                  <p @click.stop.prevent="goBackToShopping">返回商城</p>
                </div>
              </div>
            </div>
            <!--<vpay ref="pays" v-model="showPay" @close="close" @forget="forget" @input-end="inputEnd"></vpay>-->
          </div>

    </div>
</template>

<script>
  import bridge from 'common/js/bridge'
  import md5 from 'js-md5';
  import 'common/js/gt'
  /*import Vue from 'vue';
  import vpay from 'vpay'
  Vue.use(vpay);*/
  import {userInfo, userAddress, deleteUserAddress, checkPayPassword, getCode, geetestInit, checkSMSCode, submitOrder } from 'api/register'
  export default {
    props: [],
    components: {

    },
    data () {
      return {
        isIOS: false,
        uid: localStorage.getItem('wallet_uid') || window['uid'],
        area: localStorage.getItem('wallet_area') || window['area'],
        shopToken: localStorage.getItem('wallet_shopToken') || window['shopToken'],
        phone: localStorage.getItem('wallet_phone') || window['phone'],
        token: window['appToken'],
        addrId: 0,
        coinType: 3,
        starPhone: '',
        scene: 'transfer',
        current: 0,
        deliveryList: [],
        gid: 0,
        showShopping: false,
        shoppingDetail: {
          cvnt: '34523.23',
          name: '人人影视路由器',
          num: 1,
          unit: '张'
        },
        showPay: false,
        payPwd: '',
        password: {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        },
        showPayLoading: false,
        showIdCheck: false,
        verificationCode: '',
        showFlag: true,
        countdown: 60,
        showResult: false,
        showMask: false,
        payPassword: '',
        sign: '',
        captchaObj: '',
        positionFlag: true
      }
    },
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        let query = to.query;
        Object.assign(vm, query);
        console.log(query);
        vm.gid = query.gid;
        vm.uid = query.uid;
        vm.area = query.area;
        vm.phone = query.phone;
        vm.shopToken = query.shopToken;
        vm.shoppingDetail = {
          cvnt: query.cvnt,
          name: query.name,
          num: query.num,
          unit: '张'
        };
        vm.getUserAddress();
        // vm.getRegister_ini();
      })
    },
    created() {
      this.detectOS();
    },
    mounted(){
      // this.getUserAddress();
      // window.addEventListener('scroll', this.handleScroll);
    },
    computed: {


    },
    watch: {
      'password.num6': {
        handler(newVal, oldVal) {
          if (newVal >= 0 && this.payPwd.length == 6) {
            // console.log(this.payPwd);
            this.payPassword = md5(this.payPwd);
            // console.log(this.payPassword);
            // this.verifyPayPassword();
            setTimeout(() => {
              this.verifyPayPassword();
            }, 50);
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      /*handleScroll() {
        var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        var winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        var window_height = winHeight + document.body.offsetTop;
        if (scrollHeight <= window_height) {
          this.positionFlag = false;
        } else {
          this.positionFlag = true;
        }
      },*/
      detectOS() {
        let u = navigator.userAgent;
        // console.log(u);
        this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        // console.log(this.isIOS);
      },
      getPwd(){
        // alert(11)
        bridge.forgetPwd()
      },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      },
      verifyPayPassword() {
        this.showPayLoading = true;
        checkPayPassword({password: this.payPassword}).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            setTimeout(() => {
              /*this.showToast('支付密码验证成功', 'correct');*/
              const toast = this.$createToast({
                time: 1000,
                txt: '支付密码验证成功',
                type: 'correct'
              });
              toast.show();
            }, 500);
            setTimeout(() => {
              this.showPayLoading = false;
              this.showPay = false;
              this.starPhone = this.phone.substr(0, 3) + '****' + this.phone.substr(7);
              this.finishVerification();   // 目前不校验短信验证码
              // this.showIdCheck = true;
            }, 1600);
          }
        }).catch((error) => {
          // console.log(error);
          if (error.status && error.status != 1) {
            setTimeout(() => {
              this.showToast(error.info, 'warn');
            }, 1500)
          }
          setTimeout(() => {
            this.showPayLoading = false;
          }, 1500)
        })
        /*验证支付密码成功或者失败后将当前已经输入的支付密码清空*/
        this.password = {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        };
        this.payPwd = '';
        this.payPassword = '';

      },
      getUserAddress() {
        userAddress(this.uid).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            if (data.data.length > 0) {
              this.deliveryList = data.data;
              this.addrId = data.data[0].id;
              // console.log(this.addrId);
            } else if (data.data.length == 0) {

            }
          }
        })
      },
      editAddress(index, arr) {
        this.$router.push({path: 'addAddress', query: {
          uid: this.uid,
          id: arr[index].id,
          address: arr[index].address,
          username: arr[index].name,
          phoneInput: arr[index].phone,
          status: arr[index].status,
          cvnt: this.shoppingDetail.cvnt,
          name: this.shoppingDetail.name,
          num: this.shoppingDetail.num,
          unit: '张',
          phone: this.phone,
          area: this.area,
          gid: this.gid,
          shopToken: this.shopToken
        }})
      },
      deleteAddress(id) {
        deleteUserAddress(this.uid, id).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            const toast = this.$createToast({
              time: 3000,
              txt: '删除地址成功!',
              type: 'correct'
            });
            toast.show();
            this.deliveryList = data.data;
          }
        })
      },
      chooseAddress(num, item, arr) {
        // this.current = num;
        let temp = item;
        this.addrId = temp.id;
        arr.splice(num, 1);
        arr.unshift(temp);
        // console.log(this.addrId);
      },
      goAddAddress() {
        this.$router.push({path: 'addAddress', query: {
            gid: this.gid,
            uid: this.uid,
            cvnt: this.shoppingDetail.cvnt,
            name: this.shoppingDetail.name,
            num: this.shoppingDetail.num,
            unit: '张',
            area: this.area,
            phone: this.phone,
            shopToken: this.shopToken
          }
        });
      },
      close() {
        this.showMask = false;
      },
      forget() {

      },
      inputEnd() {

      },
      chooseNum(val) {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          this.password.num1 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 1) {
          this.password.num2 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 2) {
          this.password.num3 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 3) {
          this.password.num4 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 4) {
          this.password.num5 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 5) {
          this.password.num6 = val;
          this.payPwd += val;
        }
        // console.log(this.payPwd);
      },
      deletePwd() {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          return;
        } else if (this.payPwd.length == 1) {
          this.password.num1 = -1;
          this.payPwd = '';
        } else if (this.payPwd.length == 2) {
          this.password.num2 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 3) {
          this.password.num3 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 4) {
          this.password.num4 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 5) {
          this.password.num5 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 6) {
          this.password.num6 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        }
        // console.log(this.payPwd);
      },
      closeMask(ev) {
        if (!this.$refs.maskContent.contains(ev.target)) {
          this.showMask = false;
          this.showShopping = false;
          this.showPay = false;
          this.showPayLoading = false;
          this.showIdCheck = false;
          this.showResult = false;
          /*关闭弹框时将当前已经输入的支付密码清空*/
          this.password = {
            num1: -1,
            num2: -1,
            num3: -1,
            num4: -1,
            num5: -1,
            num6: -1
          };
          this.payPwd = '';
          this.payPassword = '';
          this.showFlag = true;
          this.countdown = 60;
        }
      },
      getVerifyCode() {
        if (!this.captchaObj) {
          this.getRegister_ini().catch(e => {
            // console.log(e);
            let me = this;
            me.$createToast({
              time: 3000,
              type: 'warn',
              mask: true,
              txt: e.info || '获取验证码失败，请刷新页面重试'
            }).show();
          })
        }
        if (this.isGetCoding) {
          return;
        }
        // this.captchaObj.verify();
      },
      getRegister_ini() {
        return geetestInit().then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.startGeetest(data);
          }
        })


      },
      startGeetest(data) {
        // console.log(data);
        initGeetest({
          // 以下配置参数来自服务端 SDK
          gt: data.data.gt,
          challenge: data.data.challenge,
          offline: !data.data.success,
          product: 'bind',
          new_captcha: true
        }, (captchaObj) => {
          // console.log('111' + captchaObj)
          this.captchaObj = captchaObj;
          captchaObj.onReady(this.captchaReady).onSuccess(this.captchaSuccess);
          //captchaObj.onSuccess(this.captchaSuccess);
        })
      },
      captchaReady() {
        this.captchaObj.verify();
      },
      captchaSuccess() {
        if (this.isGetCoding) {
          return;
        }
        this.isGetCoding = true;
        let result = this.captchaObj.getValidate();
        // console.log(result);
        let postData = Object.assign({
          // scene: this.scene,
          area: this.area,
          phone: this.phone
        }, result)
        getCode(postData).then((data) => {
          // console.log(data);
          this.startCountDown();
          this.isGetCoding = false;
          this.captchaObj = null;

      }).catch((err) => {
          this.isGetCoding = false;
          let me = this;
          this.showToast(err.info, 'warn');
          this.captchaObj = null;
        })
      },
      startCountDown() {
        this.showFlag = false;
        let time = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(time);
            this.showFlag = true;
            this.countdown = 60;
          }
        }, 1000);
      },
      submitToPay() {
        if (this.deliveryList.length == 0) {
          this.showToast('请先添加收货地址！', 'warn');
          return;
        }
        this.showMask = true;
        this.showShopping = true;
      },
      confirmToPay() {
        this.showShopping = false;
        this.showPay = true;
      },
      finishVerification() {
        /*if (this.verificationCode == '') {
          this.showToast('请输入短信验证码', 'warn');
          return;
        }*/
        if (this.isSubmiting) {
          return;
        }

        checkSMSCode().then((data) => {
          if (data.status && data.status == 1) {
            this.isSubmiting = true;
            let postData = {
              uid: this.uid,
              token: this.shopToken,
              gid: this.gid,
              num: this.shoppingDetail.num,
              addr_id: this.addrId,
              coin_type: this.coinType
            };
            submitOrder(postData).then((data) => {
              this.showToast('下单成功！', 'correct');
              // this.showIdCheck = false;
              this.showResult = true;
              // this.verificationCode = '';
              this.isSubmiting = false;
            }).catch((err) => {
              this.isSubmiting = false;
              this.showToast(err.info, 'warn');
            })
          }
        }).catch((err) => {
          this.showMask = false;
          // this.verificationCode = '';
          this.showToast(err.info, 'warn');
        })
      },
      goBackToShopping() {
        this.showMask = false;
        this.showShopping = false;
        this.showPay = false;
        this.showIdCheck = false;
        this.showResult = false;
        if (this.isIOS) {
          this.$router.push({path: 'goodsList', query: {
            uid: this.uid,
            token: this.token,
            phone: this.phone,
            area: this.area,
            shopToken: this.shopToken
           }
          });
        } else {
          bridge.goBackShopping();
        }

        /*this.$router.push({path: 'goodsList', query: {

          }
        });*/
      },
      goBuyGoods() {
        /*this.$router.push({path: 'buyGoods', query: {
            id: this.deliveryList[this.current].id,
            address: this.deliveryList[this.current].address,
            name: this.deliveryList[this.current].name,
            phone: this.deliveryList[this.current].phone,
            code: this.deliveryList[this.current].code,
            status: this.deliveryList[this.current].status,
            gid: this.gid
          }
        });*/
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'common/scss/index.scss';
  body,html{
    height:100%;
  }
  .address-container{
    /*height:calc(100% - 88px);*/
    position:relative;
    height:100%;
    background:#F5F5FB;
    /*overflow-y:auto;*/
    overflow:hidden;
  }
  .address-box{
    height:calc(100% - 88px);
    overflow-y: auto;
  }
  .address-wrapper{
    padding:23px 24px 20px;
    margin:22px 26px;
    border-radius:10px;
    box-shadow:0 2px 4px 0 rgba(10,29,87,0.3);
    background:#fff;
    border:1px solid transparent;
    /*border:1px solid #E3E3E3;*/
    h3{
      display:flex;
      margin:0 0 13px;
      justify-content:space-between;
      strong{
        font-size:30px;
        color:#000;
      }
      span{
        color:#333;
        font-size:28px;
      }
    }
    p{
      color:#666;
      font-size:24px;
      line-height:1.65;
    }
    .default-address{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-top:10px;
      padding:20px 0 4px;
      border-top:1px solid #e3e3e3;
      color:#999;
      font-size:24px;
      p{
        img{
          width:40px;
          height:40px;
          margin-right:16px;
          vertical-align:bottom;
        }
      }
      h5{
        span{
          display:inline-block;
          width:120px;
          height:50px;
          line-height:50px;
          border:1px solid rgba(199,199,199,1);
          border-radius:4px;
          text-align:center;
        }
        span:first-child{
          margin-right:30px;
        }
      }
    }
  }

  .address{
    padding-top:22px;
    .address-wrapper:first-child{
      margin-top:0;
    }
  }
  .selected{
    border:1px solid #173E8F;
    /*background:#fff url("~assets/images/choose1.png") no-repeat left top;*/
    background:#fff;
    /*background-size:34px 34px;*/
  }

  /*.next-step{
    position:fixed;
    z-index:9988;
    bottom:0;
    left:0;
    right:0;
    color:#fff;
    height:88px;
    line-height:88px;
    text-align:center;
    background:#173E8F;
    span{
      display:block;
      font-size:28px;
    }
  }*/
  .next-step{
    display:flex;
    color:#fff;
    height:88px;
    line-height:88px;
    align-items:center;
    background:#173E8F;
    span{
      display:block;
      width:100%;
      height:88px;
      line-height:88px;
      font-size:28px;
      text-align: center;
    }
  }
  .add-btn{
    height:150px;
    line-height:150px;
    border:1px solid rgba(201,204,220,1);
    border-radius:10px;
    margin:30px 26px 140px;
    text-align:center;
    color:#1253FC;
    /*padding:10px 0;*/
    img{
      display:inline-block;
      width:36px;
      height:36px;
      vertical-align:middle;
      margin-right:12px;
      margin-top:-2px;
    }
    span{
      display:inline-block;
      vertical-align:middle;
      font-size:30px;
    }
  }

  .mask{
    position:fixed;
    z-index:9991;
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0, 0, 0, 0.5);

    .general-height{
      /*height: 500px;*/
      height: 67.46vh;
      background:rgba(255,255,255,1);
    }
    .title{
      padding:29px 0 28px;
      font-size:34px;
      border-bottom:1px solid rgba(245,245,245,1);
      color:#202C5B;
      text-align:center;
    }
    .number-group{
      position:absolute;
      z-index:9992;
      bottom:0;
      left:0;
      right:0;
      height:448px;
      >div:first-child{
        border-top:1px solid rgba(245,245,245,1);
      }
      .number-btn{
        display:flex;
        div{
          flex:1;
          height:111px;
          line-height:111px;
          font-size:50px;
          color:#333;
          text-align:center;
          border-bottom:1px solid rgba(245,245,245,1);
          border-right:1px solid rgba(245,245,245,1);
          -webkit-tap-highlight-color:rgba(0,0,0,0.15);
        }
        div:active{
          background:rgba(0,0,0,0.15);
        }
        div:last-child{
          border-right:none;
        }
        .no-num{
          background:#e3e7ee;
          img{
            width:44px;
            height:32px;
            display:block;
            margin:40px auto;
          }
        }
      }
    }
    .shopping-detail{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;

      .content{
        margin:97px 30px 0;
        h2{
          margin-bottom:66px;
          text-align:center;
          font-size:30px;
          color:#202C5B;
          font-weight:600;
          span{
            font-size:72px;
          }
        }
        p{
          display:flex;
          justify-content:space-between;
          font-size:28px;
          padding-bottom:29px;
          border-bottom:1px solid #ececec;
          span{
            color:#71768C;
          }
          strong{
            color:#202C5B;
          }
        }
        p:last-child{
          margin-top:30px;
        }
      }
      .result{
        margin-top:97px;
        text-align:center;
        img{
          width:80px;
          height:80px;
          margin-bottom:41px;
        }
        h3{
          margin-bottom:60px;
          font-size:28px;
          color:#202C5B;
        }
        p{
          font-size:28px;
          color:#71768C;
        }
      }
      .pay-btn{
        position:absolute;
        bottom:30px;
        height:84px;
        line-height:84px;
        text-align:center;
        background:rgba(23,62,143,1);
        border-radius:8px;
        color:#fff;
        width:calc(100% - 60px);
        margin:0 30px;
        font-size:34px;
      }
    }
    .pay-password{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .password-wrapper{
        display:flex;
        margin:43px 30px 0;
        height:88px;
        line-height:88px;
        border:1px solid rgba(209,209,209,1);
        border-radius:10px;
        span{
          flex:1;
          text-align:center;
          border-right:1px solid rgba(209,209,209,1);
          strong{
            display:block;
            width:20px;
            height:20px;
            border-radius:50%;
            background:#333;
            margin:34px auto;
          }
        }
        span:last-child{
          border-right:none;
        }
      }
      .forget-password{
        color:#1253FC;
        width:25%;
        padding:12px 0;
        margin:12px auto 0;
        text-align:center;
        font-size:28px;
      }
      .pay-loading{
        position:absolute;
        z-index:9993;
        bottom:0;
        left:0;
        right:0;
        height:calc(100% - 70px);
        background:#fff;
        .paying{
          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%, -50%);
          text-align:center;
          font-size:30px;
          color:#4B74E8;
          img{
            display:block;
            width:40px;
            height:40px;
            margin:0 auto 15px;
          }
        }
      }

    }
    .id-check{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .check-title{
        position:relative;
        img{
          position:absolute;
          left:30px;
          top:29px;
          width:34px;
          height:34px;
        }
      }
      .check-content{
        margin-top:32px;
        padding:0 30px;
        p{
          text-align:center;
          color:#202C5B;
          font-size:26px;
          line-height:1.5;
        }
        .sms-input{
          height:84px;
          line-height:84px;
          margin-top:28px;
          input{
            display:inline-block;
            height:84px;
            line-height:84px;
            width:59.9999%;
            text-indent:22px;
            font-size:30px;
            border-radius:10px 0 0 10px;
            border:1px solid rgba(227,227,227,1);
            border-right:none;
            box-shadow:0 0 0 rgba(0,0,0,0);
            -webkit-appearance:none;
            outline:none;
            background:#F6F7F8;
          }
          span{
            display:inline-block;
            width:39.9999%;
            height:84px;
            line-height:84px;
            border-radius:0 10px 10px 0;
            vertical-align:top;
            background:#D1D1D1;
            color:#fff;
            font-size:30px;
            text-align:center;
            /*border:1px solid rgba(227,227,227,1);
            border-left:none;*/
          }
        }
        .finish-btn{
          height:84px;
          line-height:84px;
          margin-top:32px;
          text-align:center;
          color:#fff;
          font-size:34px;
          border-radius:8px;
          background:rgba(23,62,143,0.5);
        }
        .success{
          background:rgba(23,62,143,1);
        }
      }
    }
  }
  .fixed-position{
    position:fixed;
  }
  .static-position{
    position:absolute;
  }

  .fade-enter-active, .fade-leave-active{
    /*opacity:1;
    background: rgba(7, 17, 27, 0.8);*/
    transition: all 0.5s;
    transform:translate(0, 0);
  }
  .fade-enter, .fade-leave-active{
    /*opacity:0;
    background:rgba(7, 17, 27, 0);*/
    transform: translate(0, 100%);
  }
  input::-webkit-input-placeholder{
    color: #B7C3D1;
    font-size:26px;
  }
</style>
<style>
  .cube-toast-tip{
    /*max-width:13em;*/
    font-size:28px;
    max-width:15.5em;
    line-height:40px;
  }
  .cube-toast.cube-popup {
    z-index: 10000!important;
  }
</style>
